<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/bigjo/js/jquery.js"></script>
<title>Insert title here</title>
</head>
<style type="text/css">
	#musiclikediv{
		position:relative;
		width: 100px;
		float: left;
	}
	#musiclikenav li{
		list-style-type: none;
		margin-bottom: 5px;
	}
	
	#musiclikeul{
		margin-left: -50px;
	}
	
	.musicDiv{
		position:absolute;
		margin-left:60px;
		width:850px;
		float: left;
		
	}
	
</style>

<script type="text/javascript">
	/* 10대 클릭  */
	jQuery.noConflict();
	jQuery(".tenyears").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/tenyears.musiclike",
			success:function(data){
				jQuery(".musicDiv").html(data);
			}
		});
	});
	
	/* 20대 클릭  */
	jQuery.noConflict();
	jQuery(".twentyyears").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/twentyyears.musiclike",
			success:function(data){
				jQuery(".musicDiv").html(data);
			}
		});
	});
	
	/* 30대 클릭  */
	jQuery.noConflict();
	jQuery(".thirtyyears").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/thirtyyears.musiclike",
			success:function(data){
				jQuery(".musicDiv").html(data);
			}
		});
	});
	
	/* 40대 클릭  */
	jQuery.noConflict();
	jQuery(".fortyyears").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/fortyyears.musiclike",
			success:function(data){
				jQuery(".musicDiv").html(data);
			}
		});
	});
	
	/* 50대 클릭  */
	jQuery.noConflict();
	jQuery(".fiftiesyears").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/fiftiesyears.musiclike",
			success:function(data){
				jQuery(".musicDiv").html(data);
			}
		});
	});
	
</script>

<body>
		<div id="musiclikediv">
			<nav id="musiclikenav">
				<ul id="musiclikeul">
					<li><a class="tenyears">10대</a></li>
					<li><a class="twentyyears">20대</a></li>
					<li><a class="thirtyyears">30대</a></li>
					<li><a class="fortyyears">40대</a></li>
					<li><a class="fiftiesyears">50대</a></li>
				</ul>
			</nav>
	</div>
	<div class="musicDiv">
	
	</div>
</body>
</html>